<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="11" class="top-left"
            ><div class="grid-content bg-purple">
              <el-descriptions title="运营人员(当天)" :column="4" size="mini">
                <el-descriptions-item label="工单总数(个)">
                  <p>{{ toptwo[0].total }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="完成工单(个)">
                  <p>{{ toptwo[0].completedTotal }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="拒绝工单(个)">
                  <p>{{ toptwo[0].cancelTotal }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="运营人员数(个)"
                  ><p>{{ toptwo[0].workerCount }}</p></el-descriptions-item
                >
              </el-descriptions>
            </div></el-col
          >
          <el-col :span="11" class="top-right"
            ><div class="grid-content bg-purple-light">
              <el-descriptions title="运维人员(当天)" :column="4" size="mini">
                <el-descriptions-item label="工单总数(个)">
                  <p>{{ toptwo[1].total }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="完成工单(个)">
                  <p>{{ toptwo[1].completedTotal }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="拒绝工单(个)">
                  <p>{{ toptwo[1].cancelTotal }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="运维人员数(个)">
                  <p>{{ toptwo[1].workerCount }}</p>
                </el-descriptions-item>
              </el-descriptions>
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <div class="left-center">
          <div class="gdzt">
            <div class="gdzt-left">工单状态</div>
            <div class="gdzt-right">
              <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  range-separator="~"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
              <div class="center-left-yyyy">
                <div class="yyyy">
                  <span :class="{ item: true, ischecked: zhou }" @click="week"
                    >周</span
                  >
                  <span :class="{ item: true, ischecked: yue }" @click="month"
                    >月</span
                  >
                  <span :class="{ item: true, ischecked: nian }" @click="old"
                    >年</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="wushuju" v-if="zhupic.length === 0">
            <img
              src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
              alt=""
            />
            <div class="tips">暂无数据</div>
          </div>
          <div v-else class="center-bottom" ref="chart"></div>
        </div>
        <div class="right-center">
          <div class="top">
            <span>人效排名（月度）</span>
            <el-select placeholder="全部" v-model="quyuxuanze">
              <el-option
                v-for="item in alldata.currentPageRecords"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="center">
            <div class="yyyy">
              <span :class="{ item: true, ischecked: yunyin }" @click="fn"
                >运营人员</span
              >
              <span :class="{ item: true, ischecked: yunwei }" @click="fn1"
                >运维人员</span
              >
            </div>
          </div>
          <div class="main">
            <img
              src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
              alt=""
            />
            <p>暂无数据</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { gettoptwo, getxialalist, getgdztt } from '@/api/personnel'
// 日期格式化，返回值形式为yy-mm-dd
function timeFormat1(date) {
  if (!date || typeof date === 'string') {
    this.error('参数异常，请检查...')
  }
  const m = date.getMonth() + 1 // 月
  const d = date.getDate() // 日

  return m + '月' + d + '日'
}
// 日期格式化，返回值形式为yy-mm-dd
function timeFormat(date) {
  if (!date || typeof date === 'string') {
    this.error('参数异常，请检查...')
  }
  const y = date.getFullYear() // 年
  const m = date.getMonth() + 1 // 月
  const d = date.getDate() // 日
  return y + '-' + `${m < 10 ? '0' + m : m}` + '-' + `${d < 10 ? '0' + d : d}`
}
// 获取这周的周一
function getFirstDayOfWeek(date) {
  const weekday = date.getDay() || 7 // 获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7
  date.setDate(date.getDate() - weekday + 1) // 往前算（weekday-1）天，年份、月份会自动变化
  return timeFormat(date)
}
// 获取当月第一天
function getFirstDayOfMonth(date) {
  date.setDate(1)
  return timeFormat(date)
}
// 获取当年第一天
function getFirstDayOfYear(date) {
  date.setDate(1)
  date.setMonth(0)
  return timeFormat(date)
}
export default {
  name: 'peoplework-page',
  async created() {
    const time = await timeFormat(new Date()) // 本日第一天
    // console.log(time)
    this.today = time
    const time1 = await getFirstDayOfWeek(new Date()) // 本周第一天
    // console.log(`${time1}+00:00:00`)
    this.weekday = time1
    const time2 = await getFirstDayOfMonth(new Date()) // 本月第一天
    // console.log(`${time2}+00:00:00`)
    this.yueday = time2
    const time3 = await getFirstDayOfYear(new Date()) // 本年第一天
    // console.log(`${time3}+00:00:00`)
    this.oldday = time3
    // ---------------------------------------------------
    const res = await gettoptwo(`${time} 00:00:00`, `${time} 23:59:59`)
    // console.log(res)
    this.toptwo = res
    this.value1 = [time1, time]
    // console.log(this.value1)
    // ----------------------------------------------------上面是拿顶部两图数据 下面拿下拉框
    const res1 = await getxialalist()
    console.log(res1)
    this.alldata = res1
  },
  components: {},
  props: {},
  computed: {
    timejisuan() {
      return this.zhupic.map((item) => timeFormat1(item.collectDate))
    }
  },
  data() {
    return {
      zhupic: [], // echarts数据
      today: '',
      weekday: '',
      oldday: '',
      yueday: '',
      quyuxuanze: '',
      nian: false,
      yue: false,
      zhou: true,
      value1: '',
      toptwo: '[1, 2]',
      yunyin: true,
      yunwei: false,
      alldata: '' // 所有数据
    }
  },
  watch: {
    value1: {
      deep: true,
      async handler(newvalue, oldvalue) {
        console.log(timeFormat1(new Date('2020-12-03')))
        console.log(newvalue)
        const res = await getgdztt(newvalue[0], newvalue[1])
        console.log(res)
        this.zhupic = res
        // console.log(this.zhupic.map(item => item.finishCount))
        this.$nextTick(() => {
          if (this.zhupic.length) {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(this.$refs.chart)
            // 绘制图表
            myChart.setOption({
              legend: {
                y: 'bottom',
                data: ['完成工单', '取消工单']
              },
              tooltip: {},
              dataZoom: {
                type: 'inside'
              },
              xAxis: {
                axisLabel: {
                  interval: 5,
                  textStyle: {
                    fontSize: '10px',
                    color: '#d2d2d2'
                  }
                },
                data: this.zhupic.map((item) =>
                  timeFormat1(new Date(item.collectDate))
                )
              },
              yAxis: [
                {
                  type: 'value',
                  name: '工单量 : 个'
                }
              ],
              series: [
                {
                  name: '完成工单',
                  type: 'bar',
                  barWidth: 3,
                  data: this.zhupic.map((item) => item.finishCount),
                  itemStyle: {
                    normal: {
                      barBorderRadius: [30, 30, 0, 0]
                    }
                  },
                  color: '#7997ff'
                },
                {
                  name: '取消工单',
                  type: 'bar',
                  barWidth: 3,
                  data: this.zhupic.map((item) => item.cancelCount),
                  itemStyle: {
                    normal: {
                      barBorderRadius: [30, 30, 0, 0]
                    }
                  },
                  color: '#ff5757'
                }
              ]
            })
          }
        })
      }
    }
  },
  methods: {
    fn() {
      this.yunyin = true
      this.yunwei = false
    },
    fn1() {
      this.yunyin = false
      this.yunwei = true
    },
    async week() {
      this.zhou = true
      this.yue = false
      this.nian = false
      const res = await getgdztt(this.weekday, this.today)
      console.log(res)
      this.value1 = [this.weekday, this.today]
    },
    async month() {
      this.nian = false
      this.yue = true
      this.zhou = false
      const res = await getgdztt(this.yueday, this.today)
      console.log(res)
      this.value1 = [this.yueday, this.today]
    },
    async old() {
      this.nian = true
      this.yue = false
      this.zhou = false
      const res = await getgdztt(this.oldday, this.today)
      console.log(res)
      this.value1 = [this.oldday, this.today]
    }
  }
}
</script>

<style scoped lang="scss">
.gdzt-left {
  font-weight: 800;
  font-size: 13px;
}
.wushuju {
  margin-top: 140px;
  .tips {
    margin-top: 25px !important;
    color: #20232a !important;
    font-size: 14px !important;
  }
}
.center-bottom {
  // background-color: green;
  height: 350px;
}
// ---------------------------------------echart图
::v-deep .el-date-editor .el-range__close-icon {
  margin-top: -10px;
}
::v-deep.el-date-editor .el-range-separator {
  margin-top: -10px;
}
::v-deep .el-date-editor .el-range__icon {
  margin-top: -10px;
}
::v-deep .el-range-editor.el-input__inner {
  margin-top: 10px !important;
  width: 250px;
}
.main {
  text-align: center;
  margin-top: 100px;
  p {
    margin-top: 20px;
    font-size: 12px;
  }
}
.center {
  width: 100%;
  height: 22px;
  // background-color: red;
  margin-top: 20px;
  .yyyy {
    width: 150px;
    background-color: #e9f3ff;
    border-radius: 5px;
    padding: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    .ischecked {
      background: #fff;
      -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
      border-radius: 7px;
      font-weight: 600;
      color: #333;
    }
    .item {
      font-size: 12px;
      line-height: 22px;
      cursor: pointer;
    }
  }
}
::v-deep .el-select .el-input .el-select__caret.is-reverse {
  transform: rotateZ(0);
  margin-top: -5px !important;
}
::v-deep .el-select__caret {
  margin-top: 5px !important;
}
::v-deep .el-input__inner {
  height: 30px !important;
}
::v-deep .el-main {
  padding: 0 !important;
  display: flex;
  width: 83.3vw !important;
  margin-left: 23px;
  margin-top: 100px;
  height: 60vh;
  // background-color: red;
  border-radius: 20px;
  .left-center {
    width: 1050px;
    background-color: #f8fafd;
    margin-right: 20px;
    border-radius: 20px;
    text-align: center;
    .gdzt {
      // background-color: red;
      border-radius: 20px;
      height: 50px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .gdzt-right {
        // background-color: green;
        display: flex;
        .center-left-yyyy {
          .yyyy {
            width: 120px;
            background-color: #e9f3ff;
            border-radius: 5px;
            padding: 3px;
            box-sizing: border-box;
            margin: 11px 5px;
            display: flex;
            justify-content: space-around;
            .ischecked {
              background: #fff;
              width: 23px;
              text-align: center;
              -webkit-box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
              box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
              border-radius: 7px;
              font-weight: 600;
              color: #333;
            }
            .item {
              font-size: 12px;
              line-height: 22px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .right-center {
    flex: 1;
    background-color: #f8fafd;
    border-radius: 20px;
    .top {
      padding-top: 20px;
      .el-select {
        margin-left: 100px;
        width: 75px;
        height: 5px !important;
        font-size: 12px !important;
      }
      span {
        font-weight: 800;
        font-size: 13px;
        margin-left: 15px;
        // margin-top: 15px;
      }
    }
  }
}
// -------------------------------------------------上面两个框样式
::v-deep .el-descriptions-item__label {
  // 标题
  margin-top: 40px !important;
  margin-left: 60px !important;
  color: #91a7dc;
}
.el-descriptions-item__content {
  // 数字
  p {
    color: #072074;
    font-size: 30px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    margin-left: -75px;
    margin-top: -10px;
    text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
  }
}
::v-deep .el-descriptions-item__label.has-colon::after {
  content: '';
}
.top-left {
  background-color: #e9f3ff !important;
  background-image: url(),
    url();
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  padding: 20px;
  border-radius: 20px;
  height: 140px;
}
::v-deep .el-descriptions__body {
  background-color: rgba($color: #000000, $alpha: 0);
}
.top-right {
  height: 140px;
  background: #fbefe8
    url(http://likede2-admin.itheima.net/img/operation.4120cc58.png) no-repeat
    calc(100% - 12px) 100%;
  padding: 20px;
  border-radius: 20px;
  box-sizing: border-box;
  margin-left: 30px;
  ::v-deep .el-descriptions-item__label {
    // 标题
    color: #de9690;
  }
  p {
    color: #ff5757;
    text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);
  }
}
.el-row {
  width: 85vw;
}
::v-deep .el-col-11 {
  width: 48%;
}
.el-container {
  width: 100vh;
}
</style>
